<template>
    <div class="main">
        <div style="width:100%; height:40px; background-color:#fff; margin-bottom:20px; padding: 0px;">当前模块:<span
                style="font-weight: bold">
                查询本区的学科教师与当前学期的任教信息(学科教师信息查询)
            </span>
        </div>
        <div class="main-body">

            <div class="main-header float-left" style="display: flex">
                <div style="text-align: center; margin-right: 60px">

                </div>
                <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
                    <el-form-item label="">
                        <el-select v-model="formInline.xq" placeholder="请选择">
                            <el-option v-for="item in dmxklist" :key="item" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select v-model="formInline.gzXqdm" placeholder="请选择" clearable>
                            <el-option v-for="(item, index) in schoolList" :key="index" :label="item.XQJC"
                                :value="item.NEW_XQDM">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
                        <el-button type="primary" icon="el-icon-download">下载查询结果</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 新增弹窗 -->
            <el-dialog title="新增学期操作窗口" :visible.sync="dialogVisible" width="30%">
                <div>新增学期<el-input v-model="input" placeholder="请输入内容" style="width:70%"></el-input>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">提 交</el-button>
                </span>
            </el-dialog>





            <!-- 左边滚动表格 -->
            <div class="main-center float-left">
                <el-table :data="tableData" height="650" style="width: 100%; margin-top: 6px" :header-cell-style="{
                    background: '#fafafa',
                    color: '#000000e0',
                    fontWeight: 600
                }">

                    <el-table-column prop="nj" label="年级" align='center'>
                    </el-table-column>
                    <el-table-column prop="bj" label="班级" align='center'>
                    </el-table-column>
                    <el-table-column prop="rs" label="人数" align='center'>
                    </el-table-column>
                    <el-table-column prop="bzr" label="班主任" align='center'>
                    </el-table-column>
                    <el-table-column v-for="item in tableColumns" :key="item.key" :prop="item.key" align='center'
                        :label="item.name">
                    </el-table-column>
                </el-table>



                <!-- <div class="footer-pagination">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="formInline.currentPage" :page-sizes="[10, 20, 30, 50, 100, 200, 300, 500]"
                        :page-size="formInline.limit" layout="total, sizes, prev, pager, next, jumper"
                        :total="formInline.total">
                    </el-pagination>
                </div> -->
            </div>
        </div>
    </div>
</template>
<script>
import httpdict from '../../api/dict'
import httplogin from '../../api/login'
export default {
    name: 'Social',
    data() {
        return {
            radio: '1',
            tableData: [],
            tableData2: [],
            formInline: {
                xq: '',
                benqu: '',
                gzXqdm: '',
                xm: '',
                xk: "",
                ddl_xz: '',
                ddl_jdfs: '',
                currentPage: 1,
                limit: 10,
                total: 0,
                gzXqdm: ""
            },
            ddl_lb_list: [], //类别 options
            ddl_bb_list: [], //办别 options
            ddl_xz_list: [
                {
                    value: '全部',
                    label: '全部'
                },
                {
                    value: '普通',
                    label: '普通'
                },
                {
                    value: '工读',
                    label: '工读'
                },
                {
                    value: '特教',
                    label: '特教'
                }
            ], //性质 options
            ddl_jdfs_list: [
                {
                    value: '全部',
                    label: '全部'
                },
                {
                    value: '走读',
                    label: '走读'
                },
                {
                    value: '寄宿',
                    label: '寄宿'
                }
            ], //就读方式 options
            dialogVisible: false,
            dialogVisible1: false,
            dialogVisible3: false,
            dialogDetails: false,

            schoolList: [],
            sfzlxArr: [],
            sfzjh: '',
            sfzlxval: '1',
            JiaoZhiGongInfo: {},
            faculty: {},
            countryArr: [],
            mzArr: [],
            zzmmArr: [],
            gzxiaoqu: '3101517061',
            dmxklist: [],
            groupList: [],
            tableColumns: [

            ],

        }
    },
    mounted() {
        this.getSemesterway()
        this.getschoolList()
    },
    methods: {
        // 左边表格内容调接口
        async getSemesterway() {
            let res = await httplogin.getSemester()
            if (res.data.code == 200) {
                // select选择器内容
                this.dmxklist = res.data.data.list
                this.formInline.xq = this.dmxklist[0]
                this.TeachingCourses()
            }
        },
        //   /dm_xk
        // 右边表格内容调接口
        async TeachingCourses() {
            let data = {
                page: this.formInline.currentPage,
                size: this.formInline.limit,
                xq: this.formInline.xq,
                gzXqdm: this.formInline.gzXqdm
            }
            let res = await httplogin.getSchoolClassInfo(data)

            if (res.data.code == 200) {
                var arr = []
                var map = {}
                var mapInfo = {}
                this.tableColumns = []
                this.tableData = res.data.data.list;
                if (this.tableData.length <= 0) {
                    return
                }
                this.tableData.forEach(item => {
                    if (item.kc_id) {
                        map[item.kc_id + "" + item.kcxz] = item.mc + "(" + item.kc + ")"
                    }

                    if (!mapInfo[item.bj_id]) {
                        let obj = {
                            bj_id: item.bj_id,
                            kc_id: item.kc_id,
                            nj: item.nj,
                            bj: item.bj,
                            rs: item.rs,
                            bzr: item.bzr
                        }
                        mapInfo[item.bj_id] = obj
                        mapInfo[item.bj_id]["a" + item.kc_id + "" + item.kcxz] = item.xm
                    } else {
                        mapInfo[item.bj_id]["a" + item.kc_id + "" + item.kcxz] = item.xm
                    }


                })
               
                let arrList = [];
                for (let key in mapInfo) {
                    arrList.push(mapInfo[key])
                }
                this.tableData = arrList
                for (let key in map) {

                    this.tableColumns.push({ key: ("a" + key), name: map[key], width: 150 })
                }


                //     // {bj:"", a419:"yuan",a411:"sx"}
                // for (let i = 0; i < this.tableData.length; i++) {
                //     // arr.push(this.tableData[i].mc)
                //     arr.push(this.tableData[i].mc)
                // }
                // const result = Array.from(new Set(arr))


                // console.log(newarr)
                // for (let i = 0; i < newarr.length; i++) {
                //     this.tableColumns.push({ key: (newarr[i]), name: newarr[i], width: 120 })
                // }
                // console.log( this.tableColumns)

                // this.formInline.total = res.data.data.total;
            }
        },

        async moveFacultyListway() {
            let data = {
                xq: this.formInline.xq
            }

            var res = await httplogin.getXqPhase(data)


            if (res.data.code == 200) {
                this.tableData = res.data.data.list
            }
        },
        // 选择监听动态
        onChange(res) {
            this.moveFacultyListway()
        },

        async getshzjlxway() {
            var res = await httpdict.getshzjlx()
            if (res.data.code == 200) {
                this.sfzlxArr = res.data.data.sfzlx
            }
        },
        async GetCountryway() {
            var res = await httpdict.GetCountry()
            if (res.data.code == 200) {
                this.countryArr = res.data.data.sfzlx
            }
        },
        async GetMzway() {
            var res = await httpdict.GetMz()
            if (res.data.code == 200) {
                this.mzArr = res.data.data.sfzlx
            }
        },
        async GetZzmmway() {
            var res = await httpdict.GetZzmm()
            if (res.data.code == 200) {
                this.zzmmArr = res.data.data.sfzlx
            }
        },
        async onSubmit2() {
            var data = {
                sfzjh: this.faculty.SFZJH,
                sfzjlx: this.faculty.SFZJLX,
                gzXqdm: this.gzxiaoqu,
                ydlx: '01'
            }
            var res = await httplogin.moveFaculty(data)
            if (res.data.code == 200) {
                this.$message({
                    type: 'success',
                    message: res.data.msg
                })
                this.moveFacultyListway()
                this.dialogDetails2 = false
            }
        },
        async getschoolList() {
            let res = await httplogin.getUserPermissionInfo()
            if (res.data.code == 200) {
                // if (res.data.data.estate == "区级") {
                this.schoolList = res.data.data.UserPermission

                this.sortPingyinfun(this.schoolList)
                this.formInline.gzXqdm = this.schoolList[0].NEW_XQDM
                // }
            }
        },
        sortPingyinfun(list) {
            list.sort((a, b) => a.XQJC.localeCompare(b.XQJC))
            return list
        },
        async shenheSel() {
            var data = {
                sfzjh: this.sfzjh,
                sfzjlx: this.sfzlxval
            }
            var res = await httplogin.examineCard(data)
            if (res.data.code == 200) {
                this.dialogDetails = false
                if (res.data.data.examine) {
                    this.getFacultyinitialway()
                    this.dialogDetails2 = true
                } else {
                    this.$alert('本区教职工信息库没有找到该职工信息', '提示', {
                        confirmButtonText: '确定',
                        dangerouslyUseHTMLString: true,
                        callback: action => {
                            // this.$message({
                            //   type: 'info',
                            //   message: ``
                            // });
                        }
                    })
                }
            }
        },

        formatSfzjlx(val) {
            for (let i = 0; i < this.sfzlxArr.length; i++) {
                if (val == this.sfzlxArr[i].dm) {
                    return this.sfzlxArr[i].mc
                }
            }
        },
        formatGJDQ(val) {
            for (let i = 0; i < this.countryArr.length; i++) {
                if (val == this.countryArr[i].dm) {
                    return this.countryArr[i].mc
                }
            }
        },

        formatMZ(val) {
            for (let i = 0; i < this.mzArr.length; i++) {
                if (val == this.mzArr[i].dm) {
                    return this.mzArr[i].mc
                }
            }
        },
        formatZZMM(val) {
            for (let i = 0; i < this.zzmmArr.length; i++) {
                if (val == this.zzmmArr[i].dm) {
                    return this.zzmmArr[i].mc
                }
            }
        },

        async getFacultyinitialway() {
            var data = {
                sfzjh: this.sfzjh,
                sfzjlx: this.sfzlxval
            }
            var res = await httplogin.getFacultyinitial(data)
            if (res.data.code == 200) {
                this.faculty = res.data.data.faculty
                console.log(this.faculty)
            }
        },
        //点击查看详情 open 弹框
        handleClick(row) {
            console.log(row)
            this.dialogDetails = true
        },
        //close 弹框
        handleClose() {
            this.dialogDetails = false
            // this.$confirm('确认关闭？')
            //   .then(_ => {
            //     done();
            //   })
            //   .catch(_ => {})
        },

        onSubmit() {

            this.TeachingCourses()
        },
        handleSizeChange(val) {
            this.formInline.limit = val
            this.TeachingCourses()
        },
        handleCurrentChange(val) {
            this.formInline.currentPage = val
            this.TeachingCourses()

        }
    }
}
</script>

<style scoped>
::v-deep .el-dialog__header {
    background-color: #ff4d4f !important;
}

::v-deep .el-dialog__title {
    line-height: 24px;
    font-size: 20px;
    color: #fff !important;
    /* font-weight: 600; */
}

.main {
    width: 100%;
    float: left;
    height: auto;
    box-sizing: border-box;
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #f6f6f6;
    overflow-x: auto;
    overflow-y: auto;
}

.main-body {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    box-sizing: border-box;
    padding: 18px;
    border-radius: 12px;
}

.float-left {
    width: 100%;
    height: auto;
    float: left;
}

.main-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.d-flex {
    display: flex;
    align-items: center;
}

.mr-24 {
    margin-right: 24px;
}

.fontcolor {
    color: rgba(0, 0, 0, 0.88);
    word-break: break-word;
    line-height: 1.5714285714285714;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    font-size: 14px;
    box-sizing: border-box;
}

.footer-pagination {
    padding: 10px 0 0 0;
    text-align: right;
}

.font-all {
    color: rgba(0, 0, 0, 0.88);
    font-size: 14px;
    line-height: 1.5714285714285714;
    list-style: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    scrollbar-color: rgba(0, 0, 0, 0.25) rgba(5, 5, 5, 0.06);
}
</style>

<style scoped>
.td1 {
    border: 1px solid #8c8c8c;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #3c3c3c;
    padding: 3px;
    /* width: 40%; */
}

.inputbox {
    text-align: center;
    line-height: 25px;
    border: 1px solid #b3b3b3;
    font-size: 13px;
    height: 25px;
    width: 96%;
}

.rblList td {
    font-size: 13px;
    color: #3c3c3c;
    border-style: none;
    text-align: left;
    height: 30px;
    line-height: 30px;
}

::v-deep .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}
</style>